<div *ngIf="!loading; then projectsPart;else loadingPart"></div>
<ng-template #projectsPart>
    <div class="projectList">
        <div class="scrollingContent">
            <div class="paddingContent">
                <div class="viewContent">
                    <nz-row>
                        <nz-col [nzSpan]="12">
                            <h1 translate="project_list"></h1>
                        </nz-col>
                        <nz-col [nzSpan]="12" >
                            <div class="floated right" *ngIf="projects && projects.length > 0">
                                <app-input-autofocus [(model)]="filter"></app-input-autofocus>
                            </div>
                        </nz-col>
                    </nz-row>
                    <nz-row *ngIf="projects && projects.length > 0" [nzGutter]="{ xs: 8, sm: 16, md: 24, lg: 32 }">
                        <nz-col class="cardContainer" [routerLink]="['/project', proj.key]" *ngFor="let proj of filteredProjects;let i = index" [nzSpan]="6">
                            <app-card [title]="proj.name" [description]="proj.description" [image]="proj.icon"></app-card>
                        </nz-col>
                    </nz-row>
                    <nz-row *ngIf="!projects || projects.length === 0">
                        <nz-col [nzSpan]="24">
                            <nz-alert nzType="info" nzMessage="No project"></nz-alert>
                        </nz-col>
                    </nz-row>
                </div>
            </div>
        </div>
    </div>
</ng-template>
<ng-template #loadingPart>
    <nz-spin *ngIf="loading" nzTip="Loading projects..."></nz-spin>
</ng-template>
